<!-- src/components/PostStatsBar.vue -->
<template>
  <div class="post-stats">
    <span><i class="el-icon-view"></i> 浏览量 {{ views }}</span>
    <span><i class="el-icon-chat-line-round"></i> 评论量 {{ comments }}</span>
    <span
      @click.stop="$emit('toggle-like')"
      :class="{ 'liked': liked }"
      style="cursor: pointer;"
    >
      <i class="el-icon-thumb" />
      点赞量 {{ likes }}
    </span>
  </div>
</template>

<script setup>
defineProps({
  views: Number,
  likes: Number,
  liked: Boolean,
  comments: { type: Number, default: 0 }
})

defineEmits(['toggle-like'])
</script>

<style scoped>
.post-stats {
  display: flex;
  justify-content: flex-end;
  font-size: 13px;
  color: #888;
  gap: 16px;
}

.post-stats i {
  margin-right: 4px;
}

.liked {
  color: #409eff;
  font-weight: bold;
}
</style>